import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './index.css'
export default class App extends Component {
  //初始化状态
  state = {
    todos: [
      { id: '01', name: '吃饭', done: true },
      { id: '02', name: '睡觉', done: false },
      { id: '03', name: '打豆豆', done: true },
      { id: '04', name: '上课', done: false },
    ]
  }
  //用于添加一个todo,接收的事对象类型的数据
  addTodo = (todoObj) => {
    //获取原有的数据
    const { todos } = this.state
    //把heder中传来的数据获取到 在原来的数据中追加
    const newTodos = [todoObj, ...todos]
    //更新数据
    this.setState({ todos: newTodos })
  }
  //更新状态 （取消 选中）
  updateTodo = (id, done) => {
    //获取原数据
    const { todos } = this.state
    //匹配需要更改的数据
    const newTodos = todos.map((todoObj) => {
      if (todoObj.id === id) {
        return { ...todoObj, done }
      } else {
        return todoObj
      }
    })
    this.setState({ todos: newTodos })
  }
  //删除
  deleteTodo = (id) => {
    const { todos } = this.state
    const delTodos = todos.filter(delTodo => delTodo.id !== id)
    // console.log(delTodos)
    this.setState({ todos: delTodos })
  }
  //全选
  checkAllTodo = (done) => {
    //获取原数据
    const { todos } = this.state
    //更改数据状态
    const newTodos = todos.map((todoObj) => {
      return { ...todoObj, done }
    })
    //更新数据
    this.setState({ todos: newTodos })
  }
  //清除所有已完成
  clearAllDone = () => {
    //获取原数据
    const { todos } = this.state
    //删除已经完成的
    const newTodos = todos.filter(todoObj => {
      return !todoObj.done
    })
    this.setState({ todos: newTodos })
  }
  render () {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List
            todos={todos}
            updateTodo={this.updateTodo}
            deleteTodo={this.deleteTodo}
          ></List>
          {/* 统计已已经完成的数据 */}
          <Footer
            todos={todos}
            checkAllTodo={this.checkAllTodo}
            clearAllDone={this.clearAllDone}
          ></Footer>
        </div>
      </div>
    )
  }
}
